<template>
	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y">
			<view class="science">
				<view class="item-tit">
					{{scienceList.title || ""}}
				</view>
				 <view v-if="scienceList.photoUrl && scienceList.photoUrl.length > 0">
				   <view v-for="(item, index) in scienceList.photoUrl.split(',').map(url => url.trim())" :key="index" class="photo-item">
				     <image :src="item" mode="widthFix" class="photo"></image>
				   </view>
				 </view>
				<view class="science-item" v-if='content'>
					<rich-text :nodes="content" class="parse-content"></rich-text>

				</view>
				<!-- <view class="bot-box">
					<view class="time">
						{{scienceList.createTime}}
					</view>
					<view class="people">
						<u-icon  size="32" name="eye" color="#B3B3B3"></u-icon>
						<text>{{scienceList.browse}}人看过</text>
					</view>
				</view> -->
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		getactivity,
		getactivityid,
		getarticledetails
	} from '../../service/api.js'
	export default {
		data() {
			return {
				scienceList: {
					content:"",
				},




			}
		},
		onLoad(options) {
			if (options.id) {
				this.article(options.id)
			}

		},
		computed: {
			content() {
				return this.updateImageStyles(this.scienceList.content);
			}
		},
		methods: {
			async article(id) {
				let res = await getarticledetails(id);
				if (res.code == 200) {
					
					this.scienceList = res.data;
				}
			},
			updateImageStyles(htmlContent) {
				// 使用正则表达式将 img 标签的样式添加进去
				return htmlContent.replace(/<img([^>]+)>/g, (match, p1) => {
					// 为每个 img 标签添加 style 属性
					return `<img${p1} style="max-width: 100%; height: auto;" />`;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		// background: #F5F3F0;

		padding-top: 185rpx;

		.title {
			position: fixed;
			background: #fff;
			top: 0;
			z-index: 10;
			left: 0;
			width: 100%;
		}
	}

	.scroll-Y {
		height: calc(100vh - 235rpx);

		.science {
			padding: 24rpx;
			background: #fff;
			margin-bottom: 24rpx;
			padding: 24rpx;
			// border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.item-tit {
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 24rpx;

		}
	}

	.bot-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #B3B3B3;
		margin-top: 16rpx;

		.people {
			display: flex;
			align-items: center;
			color: #B3B3B3;
			image {
				width: 24rpx;
				height: 17rpx;
			}
		}
	}

	.science-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.parse-content img {
		max-width: 702rpx !important;
		height: auto;
	}
	.photo-item {
	  margin-bottom: 20rpx;
	}
	
	.photo {
	  // width: 100%;
	  // height: 400rpx;
	  object-fit: cover; /* 让图片充满并保持比例 */
	}
</style>